<template>
  <div style="width: 100%;height: 800px">
    <virtual-list :list-data="dataList" :itemHeight="50" :scrollHeight="800"  v-slot:item="{item}">
      <div >
        <p>  {{ item.id }} at {{ item.name  }}</p>
      </div>
    </virtual-list>
  </div>


</template>

<script lang="ts">
import {Options, Vue} from "vue-class-component";
import VirtualList from "@/components/VirtualList.vue";

@Options({
  components: {
    "virtual-list": VirtualList
  },
})
export default class VirtualListTest extends Vue {
  name: "VirtualListTest";
  dataList: object[] = [];

  created() {
    for (let i = 0; i < 1000; i++) {
      this.dataList.push({id: i, name: "testestestestsetsetest" + i})
    }
  }


}
</script>

<style scoped>

</style>
